<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      position: fixed;
      left: 0;
      top: 100px;
      width: 100px;
      height: 100px;
      background: #66ccff;

    }
  </style>
</head>
<body>
  <input type="button" id="btnStart" value="开始">
  <input type="button" id="btnEnd" value="结束">
  <div class="box" id="box"></div>
  <script>
    //获取元素
    var start = document.getElementById("btnStart");
    var end = document.getElementById("btnEnd");
    var box = document.getElementById("box");
    //设置一个移动的left
    var nowLeft = 0;
    //设置一个变量，存储定时器
    var timer;
    //开始
    start.onclick = function(){
      clearInterval(timer);//设表先关
      timer =  setInterval(function() {
        //每100ms移动5px
        nowLeft += 5;
        //添加到box上
        box.style.left = nowLeft + "px";
      }, 100);
    }
    //结束
    end.onclick = function(){
      clearInterval(timer);
    }
    
    //每次点击开始，都会使计时器使用一次，且timer指向新的计时器，到时结束按键无法停止运动，所以需要设表先关的方法，即每次开始创建计时器之前先清除一下前一个timer的计时器
  </script>
</body>
</html>